News - CrystalCommerce Liquid Documentation for Designers

News

CSRF Authenticity Token for POST requests

Sep 30, 2011 CSRF Authenticity Token for POST requests

Deployed a security upgraded today that requires all POST requests to include an authenticity token. Forms can include this hidden field tag with {{ token_tag }}.



Styling Category Layouts

Jul 26, 2011 Styling Category Layouts

Changing the width and heights of the product grids for different sized category browse areas is just some simple CSS.

For a 500px-width category browse:

body .products_grid .grid_row {
  width: 500px;
}

body .products_grid2 .product_grid {
  width: 240px; /* 500 / 2 - 10 */
}

body .products_grid2 .image, body .products_grid2 .image a {
  width: 240px;
  height: 240px;
}

body .products_grid2 .image a img {
  max-width: 240px;
  max-height: 240px;
}

body .products_grid3 .product_grid {
  width: 156px; /* 500 / 3 - 10 */
}

body .products_grid3 .image, body .products_grid3 .image a {
  width: 156px;
  height: 156px;
}

body .products_grid3 .image a img {
  max-width: 156px;
  max-height: 156px;
}

body .products_grid4 .product_grid {
  width: 115px; /* 500 / 4 - 10 */
}

body .products_grid4 .image, body .products_grid4 .image a {
  width: 115px;
  height: 115px;
}

body .products_grid4 .image a img {
  max-width: 115px;
  max-height: 115px;
}

Category Layouts, MSRP

Jul 25, 2011 Category Layouts, MSRP

Added support for the admin to select a layout for their category view. See the Category Browse template for the default implimentation.

Added MSRP for products. Check out the _product partial for default usage. (Strike-through if it is greater than the variant's price).

Also, have added the default partials templates to this docs site. For instance, when you call {{ include 'product' with product }} it loads the _product partial with the product variable.


Development Site

Jul 14, 2011 Development Site

All sites now have an associated live development site for theme testing. For example, if your store is www.example.com, which checks out at example.crystalcommerce.com, then your development site is at example.dev.crystalcommerce.com.

The dev site theme must be stored in the dev/ folder in your theme directory. Just SFTP in and create the dev folder and copy in your existing theme and start editing. You’ll need to copy in your theme.liquid, assets and any custom templates.


Added tag_list and related_tag_list to product drop

Jun 8, 2011 Added tag_list and related_tag_list to product drop

Added tag_list and related_tag_list to the Product Drop. This can be used on the product.liquid template to list the tags (and link to them too) the product is tagged with.

The related_tag_list is now used on the Related Products section of the product.liquid template. It includes all of the product’s tags, except for ones that start with a period (”.”). Use tags starting with a period for the Frontpage sliders, etc, that you don’t want to show up in the Related Products section.


tagged_with Block

Jun 2, 2011 tagged_with Block

The `tagged_with` block is available to all liquid templates. It provides a collection of products that are tagged by the admin with a product tag.

Simplest case:

{% tagged_with 'Hot Seller' do products %}
  <table border="0" class="invisible-table" width="100%">
    {% include 'product' with products %}
  </table>
{% endtagged_with %}

See more on the Working with Product Tags page


Liquid Syntax in Content Pages

Jun 2, 2011 Liquid Syntax in Content Pages

Content pages can have liquid syntax now. From the admin for a site, edit a page, check the Page contains Liquid Markup checkbox. Save the page, and edit it again. Now the WYSIWYG editor is gone, so the Liquid Markup won’t get screwed up by the editor.

This lets you add blocks like the tagged_with block to the frontpage!


Additional tagged_with options

Jun 2, 2011 Additional tagged_with options

Added options to tagged_with for reversed, limit, and page #.

Here’s an example (from ideal808) of using it on the frontpage slider:

<div id="slider" class="clearfix">
  <ul>
    {% for i in (1..5) %}
    <li>
    {% tagged_with 'Frontpage Slider' do products limit:4 page:i %}
      <table cellpadding="0" cellspacing="0">
        <tr>
        {% for product in products %}
          <td{% if forloop.first %} class="first"{% endif %}>
            <div>
              <a class="sliderImgLink" href="{{ product.url }}"><img src="{{ product.main_photo | photo_url: "medium" }}" width="100" height="100" /></a>
              <a class="sliderProductName" href="{{ product.url }}">{{ product.name }}</a>
              <span class="sliderProductPrice">{{ product.price_range }}</span>
            </div>
          </td>
        {% endfor %}
        </tr>
      </table>
    {% endtagged_with %}
    </li>
  {% endfor %}
  </ul>
</div>

Tags

May 25, 2011 Tags

CrystalCommerce has introduced a new Tagging feature for Products. By tagging products you can relate products together, and create arbitrary groups.

In the admin you can add and remove tags either from the Edit a Product screen, or by Batch Updating a list of products.

By default, we’re tagging all products with their own name, prepended with an exclamation point. For example, all “Lightning Bolt” products are tagged with “!Lightning Bolt”. The exclamation point was added so the tag “Foil” is different from the product name tag “!Foil”. We’ve also tagged all products with the strings “Foil”, “FNM”, “Textless” and “Player Rewards” in their name by the same. So “Cryptic Command - Foil Textless Player Rewards” is already tagged with “Foil”, “Textless”, “Player Rewards” and “!Cryptic Command - Foil Textless Player Rewards”.

On the store front, tags are used in two places:

  1. On the new advanced search (/advance_search), you can search by tag.
  2. On updated product pages (we’re working on disseminating this out to everyone), all products tagged the same as the product you’re looking at will be shown in the Related Products area.
  3. Link directly to a tag http://www.ideal808.com/catalog/t/!Jace%20Beleren. We’re working on this page still, so any feedback you have on what should be shown would be good.