Log in Sign Up

Managing Products - Part 1: Product Listings

Managing product listings is easy with MagicEdit. This HowTo shows you the basics of creating a product listings page, including product data and images, all very easily editable by your content manager. If all you need is product listings, you can stop at this HowTo, which is Part 1 of 2. In the second part, we'll discuss how to add PayPal checkout to your products.

As usual, this HowTo assumes that you have a basic understanding of HTML.

Introduction

As a web designer, you often run into people who need to list products on their website but don't need a full-blown shopping cart system.

Enter MagicEdit. In this HowTo we'll show you how to implement a product listing system that is completely managed using MagicEdit. A content manager can log in, add new products, edit or delete existing products, change prices, add options, and manage product images.

We'll use a couple of MagicEdit features, including MagicEdit for text and images and MagicRepeat to create, delete, and sort products. Then, we'll add product options to enable things like size or color.

So, let's get started.

The Basic HTML

Like anything we do with MagicEdit, let's not worry about what is editable or how to repeat anything to start with. Just code things up like you normally would, and we'll just use that HTML as a template for product management.

<div class="product">
  <img src="i/product.png" />
  <h2>Product Title</h2>
  <p>This is a product description.</p>
  <p>Item Number: 12345</p>
  <div>
    <label>
      <input name="option" type="radio" value="1" />
      Option: $10
    </label>
  </div>
</div>

After throwing a bit of CSS in there, and actually uploading an image, we end up with something that looks like this:

Making Things Editable

The next step is to actually enable editing of various elements. Let's add in some MagicEdit tags around everything that should change with different products. Note that we'll use the plain text editor in general, but for the description we'll let the default rich text editor take over. And of course we give everything an me_name.

<div class="product">
  <img magicedit me_name="productImage" src="i/product.png" />
  <h2><magicedit me_plain me_name="productTitle">Product Title</magicedit></h2>
  <magicedit me_name="productDescription"><p>This is a product description.</p></magicedit>
  <p>Item Number: <magicedit me_plain me_name="productSku">12345</magicedit></p>
  <div>
    <label>
      <input name="option" type="radio" value="1" />
      <magicedit me_plain me_name="productOption">Option</magicedit>:
      $<magicedit me_plain me_name="optionPrice">10</magicedit>
    </label>
  </div>
</div>

When logged in, the content manager will now see something like this:

If you are not going to continue on to Part 2 and add the PayPal checkout, but still display one or more product options as part of your listing.

Making New Products

You can edit this one product now, but before doing that let's use MagicRepeat to make more products. Basically, we just wrap the whole block of HTML in magicrepeat tags.

<magicrepeat me_name="product">
  <div class="product">
    <img magicedit me_name="productImage" src="i/product.png" />
    <h2><magicedit me_plain me_name="productTitle">Product Title</magicedit></h2>
    <magicedit me_name="productDescription"><p>This is a product description.</p></magicedit>
    <p>Item Number: <magicedit me_plain me_name="productSku">12345</magicedit></p>
    <div>
      <label>
        <input name="option" type="radio" value="1" />
        <magicedit me_plain me_name="productOption">Option</magicedit>:
        $<magicedit me_plain me_name="optionPrice">10</magicedit>
      </label>
    </div>
  </div>
</magicrepeat>

Now we can add additional products and edit the details.

Adding Options

It doesn't make much sense to have just one option, so let's add another repeat to enable the management of multiple product options. In this case we'll use the me_repeat="yes" switch to tell the nested MagicRepeat to be unique to its parent repeat instance.

<magicrepeat me_name="product">
  <div class="product">
    <img magicedit me_name="productImage" src="i/product.png" />
    <h2><magicedit me_plain me_name="productTitle">Product Title</magicedit></h2>
    <magicedit me_name="productDescription"><p>This is a product description.</p></magicedit>
    <p>Item Number: <magicedit me_plain me_name="productSku">12345</magicedit></p>

    <magicrepeat me_repeat="yes" me_name="productOptions">
      <div>
        <label>
          <input name="option" type="radio" value="1" />
          <magicedit me_plain me_name="productOption">Option</magicedit>:
          $<magicedit me_plain me_name="optionPrice">10</magicedit>
        </label>
      </div>
    </magicrepeat>

  </div>
</magicrepeat>

Now I can add multiple options and pricing to a particular product. Here's the results after editing and logging out:

Extending the Listing

That is really about all you need to create a one-page product listing. However, you can easily add a product detail page by simply linking to it from the MagicRepeat, then use me_name to update the product data simultaneously on both product summary and product detail pages.

In Part 2, we'll show you how to hook up these products to PayPal, so read on!

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top