SECTIONS - Referencing JSON Schema inside Javascript

Excursionist
46 1 2

Hello All - 

In the simplest terms I am creating a custom section & would like to be able to take in a string through a text input & have it be implemented in my javascript code.  I've added an example below.

 

If you look, Im referencing the line that reads " var speed = section.settings.slide_speed; ".  I would like to be able to replace "trueSpeed" with "speed". But everytime I do, my code breaks & I presume it is because I am referencing the object incorrectly.  Any guesses?

 

Thanks in advance!

 

{% schema %}
    "settings":[
      {
        "type": "header",
        "content": "General colors"
      },
      {
        "type": "text",
        "id": "slide_speed",
        "label": "Slide Speed (in miliseconds, numbers only)"
      } 
    ]
  }
{% endschema %}

{% javascript %}
  $(window).load(function() {
  var trueSpeed = 4000;
  var speed = section.settings.slide_speed;
  

    $('.flexslider').flexslider({
          animation: "fade",
      slideshowSpeed: trueSpeed, 
      randomize: false, 
      keyboard: true,  
      directionNav: false,
      controlNav: true,
          controlsContainer: ".flex-container"
    });
  });
{% endjavascript %}
0 Likes
Shopify Expert
2656 61 651

Hi Matt,

I'd do it this way:

<div class="flexslider" data-speed="{{ section.settings.slide_speed}}">

{% javascript %}
  $(window).load(function() {
  var trueSpeed = 4000;
  var speed = parseInt( $('.flexslider').data('speed') );
  

    $('.flexslider').flexslider({

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Expert
9800 91 1554

This code might work fine on the front end but I'd question its value within the Editor.

Remember that the Editor will load parts of the theme using AJAX. The window.load event will only fire once and won't re-trigger when a section is changed or the order of them is changed. This will cause errors or simply a blank section.

When possible, use the existing events that will fire.

  • shopify:section:load
  • shopify:section:unload
  • shopify:section:select
  • shopify:section:deselect
  • shopify:section:reorder
  • shopify:block:select
  • shopify:block:deselect

Take a read over the docs for more info on this:
https://help.shopify.com/themes/development/theme-editor/sections#theme-editor-javascript-api

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Excursionist
46 1 2

Hey Jason - 

Thank you so much for your response.   This was extremely helpful! You wouldn't happen to have an example of that Javascript API in action would you? So I can use it to troubleshoot errors in my code

 

Also Thank you Tim!

0 Likes
Shopify Expert
2656 61 651

Hi Matt, you may wish to look through the theme.js of newer Sectioned themes like Debut. Or have a look here as well -- Slate is the foundation of many of them -- https://shopify.github.io/slate/js-examples/

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Excursionist
46 1 2

Hey Tim -

Thank you so much you have been very helpful! I will check out those documents immediately. 

0 Likes
Excursionist
46 1 2

Hey Jason,

 

I was hoping you might be able to show me a block of JS where that Shopify Theme Editor API has been correctly implemented? I have no been able to figure it out.

0 Likes
Shopify Expert
2656 61 651

Hi Matt,

I happen to have one here

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Excursionist
46 1 2

Hey Tim,

Here is my very beginning code (trying to test the waters here).

function process_slick_event(evt){
  console.log(evt.target.id);
  console.log(evt.target);
  console.log(evt.detail);
}

$(document)
 .on(   'shopify:block:select', process_slick_event )
 .on( 'shopify:section:unload', process_slick_event )
;

From there I can see in my console which block is select etc. How do I actually target that block though? Like for instance I want to make that slide in my Slider Visible by adding a class to LI inside the block or something. 

0 Likes
Excursionist
46 1 2

Hey Tim - 

I know you're dying to know how my progress is going so thought I would just update and let you know that I figured it out! I've been able to get my slider to display the correct slide when selected from the theme editor and it reslicks when a change is saved/block deselected. Thank you very much for your guidance!

0 Likes