5

I am trying to implement a store using the bootstrap grid. I want products to sit in blocks of 3 in a grid.

<div class="row">

{exp:channel:entries channel="english_ciders" orderby="date" sort="desc" dynamic="no"}
    {exp:store:product entry_id="{entry_id}" return="{segment_1}/{segment_2}/{segment_3}"}  

        <div class="span3">
            {title}
        </div>
        {switch='|</div><div class="row">'}

    {/exp:store:product}
{/exp:channel:entries}

</div><!--end row-->

This works fine without the store tag. When I add the {exp:store:product} tag to the layout the form produced has its own <div> and this messes up the layout. I am sure I am approching this wrong. Any suggestions? Thanks.

  • 1
    Shouldn't your switch stament go outside the closing store tag, but inside the closing channel entries tag? – Tyssen Dec 22 '12 at 21:05
  • 1
    For future reference - to format code, use the {} button in the editor, or indent it by four spaces. Use backticks ( ` ) around inline code blocks. – Adrian Macneil Dec 22 '12 at 23:02
4

The {exp:store:product} tag creates a form element. It sounds like the problem is that you have the div set to float left, but because it is inside the form element, it's messing up your layout.

You should be able to fix it simply by moving the product form inside your div:

<div class="span3">
    {exp:store:product entry_id="{entry_id}"}
        {title}
    {/exp:store:product}
</div>
{switch='|</div><div class="row">'}
| improve this answer | |
2

Adrian is correct about putting the {exp:store:product} tag inside the div - I'd also suggest it might be useful to rethink your HTML flow here. Using a switch to close off HTML elements seems like the sort of thing which could confuse you later on, and it's definitely going to confuse the next developer who needs to work on your site.

I would suggest you take that div logic out of the entries flow, and use your own css to decide if it's a new row or not. This will make for more semantic markup, and would make more sense from the responsive layout perspective too. Don't know off the top of my head how bootstrap handles rows and column layouts, but it probably makes more semantic sense to do things like this than make each product a new column. Maybe bootstrap has built in styles that can accomplish something similar?

<style>
  .products {
    max-width: 600px;
  } 

  .product {
    width: 190px;
    margin: 5px;
    float: left;
  }
</style>

<div class="products">
{exp:channel:entries channel="english_ciders" ... }

    {exp:store:product ...}
        <div class="product">
             {title}
        </div>
    {/exp:store:product}

{/exp:channel:entries}
</div>
| improve this answer | |
2

This is a more general comment but, when having to insert an html element every x iterations of a loop, I use the following syntax, whch I find easy to understand.

{exp:channel:entries channel="news"}
    {if '{switch="one|two|three"}' == "one"}<div class="row">{/if}
        ... something ...
    {if '{switch="one|two|three"}' == "three" || "{count}" == "{total_results}"}</div>{/if}
{/exp:channel:entries}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.