Shopify Integration

[moise75]

I want to add the buy button to my page but nothing is working as expected. Depending on the version some features work, and on some versions, some of the features are not working. Can you tell why I can’t view the add to cart?

{% block main %}
  <div class="product-wrapper">
    {% for product in data.widget._product %}
      <product>
        <div class="flex justify-center">
          <div class="max-w-screen-md w-full">
            <div class="flex items-center gap-8">
              {# Product Image #}
              <div class="border-slate-50 w-40">
                <img src="{{ product.image }}" class="border-slate-50 w-full h-auto">
              </div>
              {# Product Content #}
              <div>
                <h3>{{ product.title }}</h3>
                <p>{{ product.description }}</p>
                <p> $ {{ product.price }}</p>
                <!-- Add to Cart button -->
                <div id="product"></div>
                <script>
                  ui.createComponent('product', {
                    id: 4792107630681,
                    node: document.getElementById('product'),
                    options: BuyButton
                  });
                </script>
                {% if product.uploadPdf %}
                  <p>PDF Attachment: {{ product.uploadPdf }}</p>
                  <a class="download" href="{{ apos.attachment.url(product.uploadPdf) }}">
                    Download PDF
                  </a>
                {% else %}
                  <p>No PDF attachment found.</p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
        {% if loop.last %}
          <hr class="my-4 border-t-2 border-gray-300"> <!-- Horizontal line -->
        {% endif %}
      </product>

    {% endfor %}
  </div>

  <script src="https://sdks.shopifycdn.com/buy-button/latest/buybutton.js"></script>
<script>
  // Shopify Buy Button Initialization
  var client = ShopifyBuy.buildClient({
    apiKey: '8720bd2c2978ad26ea8a0894746e2379',
    domain: 'mutual.myshopify.com',
    appId: '1'
  });

  var ui = ShopifyBuy.UI.init(client);

  var BuyButton =  {
    product: {
      layout: 'horizontal',
      googleFonts: ['Vidaloka'],
      contents: {
        description: false,
        quantity: false,
        quantityDecrement: false,
        quantityIncrement: false,
        title: false,
        price: false
      },
      order: [
        'img',
        'title',
        'variantTitle',
        'price',
        'options',
        'description',
        'quantity',
        'button',
      ],
      styles: {
        title: {
          'font-family': 'vidaloka',
          'font-size': '36px',
          'text-align': 'center',
          'position': 'relative',
          ':after': {
            'content': '""',
            'background': 'black',
            'height': '2px',
            'width': '40px',
            'position': 'absolute',
            'bottom': '-15px',
            'left': '50%',
            'transform': 'translateX(-50%)'
          }
        },
        prices: {
          'padding-top': '15px',
                    'text-align': 'center',

        },
        price: {
          'font-family': 'Vidaloka',
          'font-size': '30px',
        },
        description: {
          'text-align': 'center'
        },
        quantity: {
          'overflow': 'hidden',
          'margin': '0 auto'
        },
        button: Object.assign({}, buttonStyles, {
          'position': 'relative',
          'width': '170px',
          '@media (min-width: 500px)': {
            'left': 'calc(60%/2 - 95px)',
          },
          '@media (min-width: 680px)': {
            'left': 'calc(40%/2 - 95px)',
          }
        }),
         quantityButton: {
          'background-color': '#f4f4f4',
          'border': 0,
        },
        quantityIncrement: {
          'border-radius': '0 60px 60px 0'
        },
         quantityDecrement: {
           'margin-left': 'calc((100% - 100px )/2)',
          'border-radius': '60px 0 0 60px'
        },
        quantityInput: {
          'background-color': '#f4f4f4',
          border: 0,
          'font-family': 'vidaloka',
          'font-weight': 'bold'
        }
      },
      text: {
        button: 'Add to Bag'
      },
    },
    toggle: {
      styles: {
        toggle: {
          'background-color': 'black',
          'border-radius': 0
        }
      }
    },
    cart: {
      googleFonts: ['vidaloka'],
      styles: {
        title: {
          'font-family': 'vidaloka'
        },
        button: buttonStyles
      }
    }
  };
</script>

  </script>
{% endblock %}