Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1270851

    Rad
    Moderator

    Hi there,

    In your child theme’s functions.php, I changed the javascript code to this

    jQuery ( 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) {
          
                          $(".shopify-item").each(  function() {
                                                    ui.createComponent('product', {
                                                      id: [8888579270],
                                                      node: $(this).get(0),
                                                      moneyFormat: '%24%7B%7Bamount%7D%7D',
                                                      options: {
                                                "product": {
                                                  "variantId": "all",
                                                  "width": "240px",
                                                  "contents": {
                                                    "img": false,
                                                    "title": false,
                                                    "variantTitle": false,
                                                    "price": 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"
                                                      }
                                                    }
                                                  }
                                                }
                                              }
                                                    });
    
                                              } );
    
                              });
      }
    
    } );
    

    Then you can now simply add this <div> to any content.

    <div id="product-component-1c2c5cd67bf" class="shopify-item"></div>

    A sample is here http://jewelryarts.com/x-theme-test-page/

    Cheers!

    #1274623

    jeanettecaines
    Participant

    Hi,

    Is anyone still helping me with this problem?
    I haven’t heard back in 4 days or so.
    Jeanette

    #1274633

    Joao
    Moderator

    Hi Jaeanette,

    Since we didn“t hear from you, we thought the solution provided by Rad had worked.

    Did you try to follow his recommendations on hist last post?

    Let us know,

    Joao

    #1274767

    jeanettecaines
    Participant
    This reply has been marked as private.
    #1275484

    Lely
    Moderator

    Hi There,

    On Rad’s reply, he did update the javascript code. Then added the div on your test page. I can see the button on your test page. See attached screenshot.

    #1275765

    jeanettecaines
    Participant

    No, I added the entire button outside cornerstone in the text editor which was the only way I could get it to appear at all.
    Please try to add the Div section within cornerstone text areas and see that the button will not appear live.
    J

    #1275845

    Lely
    Moderator

    Hi J,

    I did try to create a sample page. Using text element and raw content element, I have added the code. The buttons appear on the frontend. See this:http://jewelryarts.com/shop-button-x-test/ and this: http://screencast-o-matic.com/watch/cDXvX1Q6Pi

    Hope this helps.

    #1276788

    jeanettecaines
    Participant

    Hi Lely,
    Thanks, the button does now appear. The only problem I’m having now is that no matter where I paste the code (in the right hand side of a Block grid, for example) as I did on your test page the button shows up on the extreme left of the page, out of position. I made sure the button code wasn’t set to align left, in case that affected things.
    Can you figure it out?
    Thanks, Jeanette

    #1276864

    Lely
    Moderator

    Hi Jeanette,

    Unfortunately, we cannot control how it appears on the page. Since this is a third party script/code. It is generating an iframe. It would be better if you can ask them if they have a settings for div rather than iframe. It would be best if you could consult the author of the code. Thank you for understanding.

    #1281703

    jeanettecaines
    Participant

    Hi Lely,
    Shopify says they can’t help and it seems the X theme should work to place code where I want it since that is what themes do.
    Please let me know if there is any progress on this issue.
    I am now working on this page http://jewelryarts.com/customized-classes/ and trying to get my shopify button to appear before the Features headline. To try to overcome the automatic left positioning of the mini button, I’m using the full width of page code<div id=’product-component-645363aac80′></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: [4318259014],
    node: document.getElementById(‘product-component-645363aac80’),
    moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
    options: {
    “product”: {
    “layout”: “horizontal”,
    “variantId”: “all”,
    “width”: “100%”,
    “contents”: {
    “variantTitle”: false,
    “description”: true,
    “buttonWithQuantity”: false,
    “quantity”: false
    },
    “styles”: {
    “product”: {
    “text-align”: “right”,
    “@media (min-width: 601px)”: {
    “max-width”: “100%”,
    “margin-left”: “0”,
    “margin-bottom”: “50px”
    }
    },
    “button”: {
    “font-size”: “15px”
    },
    “title”: {
    “font-size”: “26px”
    },
    “price”: {
    “font-size”: “18px”
    },
    “compareAt”: {
    “font-size”: “15px”
    }
    }
    },
    “cart”: {
    “contents”: {
    “button”: true
    },
    “text”: {
    “total”: “Total”
    },
    “styles”: {
    “footer”: {
    “background-color”: “#ffffff”
    }
    }
    },
    “modalProduct”: {
    “contents”: {
    “variantTitle”: false,
    “buttonWithQuantity”: false,
    “quantity”: false
    },
    “styles”: {
    “product”: {
    “@media (min-width: 601px)”: {
    “max-width”: “100%”,
    “margin-left”: “0px”,
    “margin-bottom”: “0px”
    }
    },
    “button”: {
    “font-size”: “15px”
    }
    }
    },
    “productSet”: {
    “styles”: {
    “products”: {
    “@media (min-width: 601px)”: {
    “margin-left”: “-20px”
    }
    }
    }
    }
    }
    });
    });
    }
    })();
    /*]]>*/
    </script>
    and entering it in the text editor after finishing with cornerstone like I did on this page http://jewelryarts.com/signup/
    but I can’t get the button to appear, whether using just the div portion or the full code. Can you please help me to get it to appear?

    #1282519

    Lely
    Moderator

    Hi There,

    For this page: http://jewelryarts.com/customized-classes/, I got this error:
    [Bugsnag] Ignoring cross-domain script error. See https://bugsnag.com/docs/notifiers/js/cors

    Can you try updating this part:
    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
    To this:
    var scriptURL = '//sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

    Then try again.