0

My twig file looks like this:

<select name="lineItems[{{ product.id }}][quantity]"
          class="custom-select product-detail-quantity-select">
      {% for quantity in range(product.minPurchase, product.calculatedMaxPurchase, product.purchaseSteps) %}
          <option value="{{ quantity }}">
              {{ quantity }}{% if product.packUnit %} {{ product.packUnit }}{% endif %}
          </option>
      {% endfor %}
  </select>

I want to change this into a Vue.js app with a quantity/count field and an 'increment' and 'decrement' button.

My Vue.js app looks like this:

<div id="app">
    <a class="btn" v-on:click="increment">Add 1</a>
    <a class="btn" v-on:click="decrement">Remove 1</a>

    <span>[[ count ]]</span>
  </div>

  <script>

    const App = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          count: 1
        }
      },
      methods: {
        increment() {
          this.count++
        },
        decrement() {
          this.count--
        }
      }
    })

  </script>

If you look at my twig file, you see for example the twig variable {{ quantity }}.

How do I use this twig variable in my Vue.js app? So when the user increment the <span>[[ count ]]</span> value by 3. It add's 3 to the {{ quantity }} variable?

meez
  • 3,783
  • 5
  • 37
  • 91
  • You can't change `twig` variables with clientside code - [reference](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – DarkBee Mar 12 '20 at 07:15
  • Work around would be to add it as `data` attribute and then read in Vue application. – Pradeepb Mar 12 '20 at 08:07

1 Answers1

0

Shopware is not using twig. It is using twig.js for the block system. E.g. for overwriting certain parts in the templates. The logic have to be implemented in the vue component. Please descibe your full problem for more information.

user12797531
  • 1
  • 2