Feb 012018
 

How To Edit CataBlog Templates shows you how to edit a template, create new templates for your catalogs, and your shopping cart and much more.

CataBlog has 4 default templates you can use straight away. These templates control all the different viewing for your catalogs. Each template serves a different purpose. Always make sure you select the correct template to display your products, images and more.

In this post you will learn what each default template does and the code it uses. Remember if you make a mistake use the undo current changes link. CataBlog templates uses a token system to insert data into your templates. You can read more about the tokens from the following URL making-custom-templates.

Note: Never edit a default template. It is better to use the default template code and create a custom template. This will prevent you from running into issues in the future.

How To Edit CataBlog Templates

Step 1 ) Click on CataBlog -> Templates to start editing the templates. See image below.

select-catablog-templates-from-admin-menu

Step 2 ) The following image CataBlog Templates Panel shows you the panel you will use to edit and create new templates. This are is important when creating special templates for various products or images. You can even create customize templates for your shopping store.

The following image shows you the following features for you to select and manage.

CataBlog Template Panel

  • Views = This list the 4 default templates created by the plugin.
  • Templates = This will display all the custom templates you create.
  • Click on Save Changes button when you are finished editing or click on undo current changes if you made a mistake and need to revert back to the default settings.
  • Click on Delete Template button if you want to delete a template you created and no longer use.

editing-catablog-templates-admin-area

CataBlog Views

Step 3 ) The following image Views shows you catablog default templates. These templates cannot be deleted. This option to now allow to delete the default templates is a great feature this plugins has.

CataBlog Views Default Templates

The following information comes from Zachary’s website.

  • Default = This template is used when you do not specify a template parameter in your ShortCodes.
  • Single = This template is used when you enable the ‘Public’ option and view a Single CataBlog page.
  • Archive = This template is used when you enable the ‘Public’ option and view a CataBlog Category page.
  • Store = This template is used to render the Buy Now Button.

Note: Always use the default template code to create a customize template.

default-catablog-views-templates

Default Template

Step 3-a ) The following image Template Views Default shows you the code used in the default template.

The following code is used in the default template. I will explain what each part of the code does. You can see that it is using HTML. Most of you will know how HTML works. However some might not have any ideas about HTML.

The following template is using the following tokens.

<div class=’catablog-row %CATEGORY-SLUGS%’>
<div class=”catablog-images-column”>
%MAIN-IMAGE%
%SUB-IMAGES%
</div>

<h3 class=’catablog-title’>%TITLE-LINK%</h3>

<div class=”catablog-description”>
<p>%DESCRIPTION%</p>
%BUY-NOW-BUTTON%
</div>

</div>

Default Template Tokens

  • %CATEGORY-SLUGS% = A string of category slugs for each catalog item, very useful for setting html class attributes.
  • %MAIN-IMAGE% = The catalog item’s primary image thumbnail, wrapped with an anchor tag for the LightBox.
  • %SUB-IMAGES% = All of the catalog item’s secondary image thumbnails, each wrapped individually with a LightBox anchor tag.
  • %TITLE-LINK% = The title rendered as a link for each catalog item. No link is rendered if the link value itself is empty.
  • %DESCRIPTION% = The description for each catalog item.
  • %BUY-NOW-BUTTON% = This will render the buy now button for each catalog item with a price greater than zero. The store view in CataBlog Templates will be used to render this button.

Each token is inserted into a div container. Each div container uses a class system to control the outcome using CSS code. This allows you to manipulate and customize each template further.

views-default-catablog-template-code

 

Single Template

Step 3-b ) The following image Template Views Single shows you the code used in the single template.

Single Template Tokens

  • %MAIN-IMAGE% = The catalog item’s primary image thumbnail, wrapped with an anchor tag for the LightBox.
  • %SUB-IMAGES% = All of the catalog item’s secondary image thumbnails, each wrapped individually with a LightBox anchor tag.
  • %DESCRIPTION% = The description for each catalog item.
  • %BUY-NOW-BUTTON% = This will render the buy now button for each catalog item with a price greater than zero. The store view in CataBlog Templates will be used to render this button.

views-single-catablog-template-code

Archive Template

Step 3-c ) The following image Template Views Archive shows you the code used in the archive template.

Archive Template Tokens

  • %MAIN-IMAGE% = The catalog item’s primary image thumbnail, wrapped with an anchor tag for the LightBox.
  • %EXCERPT% = A shorter version of the description.

views-archive-catablog-template-code

Store Template

Step 3-d ) The following image Template Views Store shows you the code used in the store template. You can see the store template with a lot more code than the other 3 templates. That is because it needs extra code for your PayPal online store.

Store Template Tokens

  • %TITLE-TEXT%: The catalog item’s title, no link will be wrapped around this title.
  • %PRODUCT-CODE%: The product code for each catalog item.
  • %PRICE%: The price, without currency symbol for each catalog item.

The following tutorials will help you learn more about the Store template, how it works and what you can do with it.

  1. Shopping Cart Settings = Shopping Cart Settings shows you how to add a price to your items so that you can sell them using PayPal.
  2. Goods Value Options = Shopping Cart Goods Value Options is an advance tutorial for the Shopping Cart. I am going to show you some cool features that you can add to the CataBlog shopping cart.
  3. Variation Control = Shopping Cart Variation Control is an advance tutorial that shows you how to set up a variation control for your products.
  4. Shopping Cart Template = This is an advance tutorial that shows you how to create different templates for various items.

views-store-catablog-template-code

Template Panel

Step 4 ) The Templates panel area will show you any custom template you create. In most cases you will spend more time in this area than the Views area.

I hope the above helps you understand how CataBlog templates manages your catalogs.

If you have any questions please let me know.

Enjoy.

CataBlog tutorials list:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.