[jeanettecainesParticipant]

Hi When I place my shopify code in cornerstone, it doesn’t show on the page. I’m used to the button not showing in the backend but it doesn’t show live either.
This is the page I’ve been experimenting with http://jewelryarts.com/x-theme-test-page/ and the code is there in the second accordion.
wordpress 4.4.5
XVersion: 4.6.4
Help?

[FriechModerator]

Hi There,

Thanks for writing in! It seems you have some syntax error on the code. Would you mind providing us login credentials in private reply and the raw shopify code? so we can take a closer look. I doubt the entire shopify code could be place on the accordion element.

Cheers!

[jeanettecainesParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

You should try this instead:

Add this code in text element:

<div id='product-component-c85777ca916'></div>

And then add the following code in your Child Theme’s functions.php file:

add_action('wp_head','shopify');

function shopify() { 
?>
<script>
	//Paste your JavaScript here
</script>
<?php 
}

Paste your JavaScript inside the script tags, make sure your don’t paste the <script> tags inside as I’ve already included in the code.

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[jeanettecainesParticipant]

I’m sorry but this advice is over my head completely. So I add this code <div id=’product-component-c85777ca916′></div> before the shopify code in text boxes, etc?
I’m afraid I have no idea where my Child Theme’s functions.php is located or what the javascript code is that I’m supposed to add? Is the javescript the shopify code? I have different buttons for different semesters, will I have to do this every time I change the button? How about the pages with multiple buttons like http://jewelryarts.com/one-day-workshops-2/
I’m lost, sorry….

[Nabeel AModerator]

Hi again,

If you haven’t setup the Child Theme yet, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then using FTP you’ll be able to locate your Child Theme’s functions.php file here /wp-content/themes/x-child You can also access your functions.php file by navigating to WordPress Dashboard > Appearance > Editor and select functions.php for editing.

The Javascript code you need to paste between the <script> tag is the shopify JavaScript code (You posted in your previous reply)

For the multiple buttons does this JavaScript code change? If it doesn’t change but only the HTML <div id='product-component-c85777ca916'></div>then you’ll have to add the multiple <div> on the page and it should work.

Hope this helps!

[jeanettecainesParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Kindly provide your FTP details are well so that we can check it further.

Thank you.

[jeanettecainesParticipant]

This reply has been marked as private.

[RadModerator]

This reply has been marked as private.

[jeanettecainesParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s because you’re only adding this,

<div id=:product-component-26d266c5d07"></div>

It’s supposed to have complete information of the product, like this

<div data-embed_type="product" data-shop="jewelry-arts-inc.myshopify.com" data-product_name="Wax Carving 101 with Savannah King" data-product_handle="wax-carving-101-with-savannah-king" data-has_image="false" data-display_size="compact" data-redirect_to="cart" data-buy_button_text="Add to Cart" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="5cd60b" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

As I said from my previous reply related to #1.

Thanks!

[jeanettecainesParticipant]

Hi,
Yes, I see the difference but where are you getting the extra code within the div’s?
When I go to shopify and generate the button code I get only the code below and when pasted into a regular text editor it produces the button as expected.
<div id=’product-component-d299376667c’></div>
<script type=”text/javascript”>
/*<![CDATA[*/

(function () {
var scriptURL = ‘https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js’;
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}

function loadScript() {
var script = document.createElement(‘script’);
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}

function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: ‘jewelry-arts-inc.myshopify.com’,
apiKey: ’59ab05aad1a84466225b343f1d2e5374′,
appId: ‘6’,
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [8809040774],
node: document.getElementById(‘product-component-d299376667c’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“width”: “240px”,
“contents”: {
“variantTitle”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“button”: {
“font-size”: “15px”
},
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “20px”,
“margin-bottom”: “50px”
}
},
“compareAt”: {
“font-size”: “12px”
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“text”: {
“total”: “Total”
},
“styles”: {
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“variantTitle”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“button”: {
“font-size”: “15px”
},
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

[RadModerator]

Hi there,

That <div> code is from here http://jewelryarts.com/one-day-workshops-2/. And the reason it works because it has complete structure and data of a product.

Where did you get the <div> content on that page? I simply use it as a sample.

Thanks!

[jeanettecainesParticipant]

Ahhh, I understand. The code on that page was added a month ago or more, shopify must have changed something about how they do their code. When I go to shopify today and generate code for that same button, I get the code at the bottom of my message.
I’ve tried both codes (the older and the new) in the regular text editor and they both produce the same button. I’m going to need help with making the new code work because that is the only code I will have to work with. Here is my test page http://jewelryarts.com/x-theme-test-page/
Thank you

<div id='product-component-1c2c5cd67bf'></div>
<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'jewelry-arts-inc.myshopify.com',
      apiKey: '59ab05aad1a84466225b343f1d2e5374',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [8809040774],
        node: document.getElementById('product-component-1c2c5cd67bf'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "width": "240px",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "button": {
        "font-size": "15px"
      },
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "compareAt": {
        "font-size": "12px"
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "text": {
      "total": "Total"
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "button": {
        "font-size": "15px"
      },
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

[Author]

Posts