Styling my MarketPress

I'm really struggling to figure this one out. I see there are "themes" that you can apply to the store itself, but when I change between the provided themes, nothing seems to change in my "Store".

Also, where can I find a list of short codes and their attributes?

I'd like my store's homepage to look similar to this: http://teatra.de/marketplace
Where the latest products are on the /store page and a button to "view all" or something.

I assume by changing the "theme", I could actually have the categories show up with a picture instead of just a text link?

Sorry for being such a noob :slight_smile:

  • Saunt Valerian

    Don't worry about being a noob, I am too! Note that two months ago, I had no idea what I was doing. I got help here and from other resources, but I was able to do the process I describe below.

    If you are using a WPMU DEV theme, you may be able to get help in this from the staff here.

    Anyhow, the Tea Trade marketplace is built not using shortcodes, but using a wordpress template file. MarketPress is built to call php template files that use specific names.

    If you create a file called mp_global_products.php, you can copy into it the contents of another template file in your theme -- maybe single.php, default.php, or blog.php -- look through your theme files to see what there is. All themes can be different, while there is some standardization, theme developers have been known to get creative with Template File names.

    To understand what a template file is look here: http://codex.wordpress.org/Stepping_Into_Templates

    After building the template file that I needed, it was as simple as adding in the MarketPress php snippet into the file exactly where I needed it to display my marketplace. It went through several renditions as MarketPress moved through its versions, but I think it is finalized now because earlier we were waiting on pagination.

    This is the code I use to display my marketplace in the template file:

    div id="market-grid">
    <?php
    $args = array (
         'text' => 'none',
         'per_page' => 12,
    );
        //check for paging
        if (get_query_var('paged'))
          $args['page'] = intval(get_query_var('paged'));
    
    mp_list_global_products( $args );
    ?>
    </div>
    
    <div id="market-page-links">
    <?php mp_global_products_nav_link( $args ); ?>
    </div>

    The marketplace has two parts here, each set off with its own div id tag. The first is where the products are displayed. The second is the pagination control. Once I got it working, it needed its own div id tag so that I could style it using CSS.

    Now, the thing to remember is that by default, it is not a grid layout. On its own, the code above will only give you a list of the products. In order to get the grid layout, you'll need to do that with CSS. I figured out how to do it, by using examining the CSS on an earlier version of http://fondelifair.com another MarketPress network (this was an earlier version of that site when they were using a different theme).

    Than said, you can use Firebug or the Google Chrome browser's built in CSS viewer to look at the css I used to create the grid layout on the Tea Trade marketplace. Using the css inspector, you can even tinker with the code while you are looking at and see how things you values you change move things around. The best way to get into manipulating CSS is to do it this way in other people's websites. To view it in Google Chrome, just right click on any element and choose Inspect Element.

    I am by no means an expert, so I may not be proficient enough to help you build a template file (hopefully others will come in with that) - I'll be happy to answer any questions you have!

    Good luck!

  • Mason

    Oh man, epic post by Saunt Valerian here :smiley:

    Sending you some rep points and also, ditto to what Saunt has said here.

    We also have a few themes already coded up to give you an idea of what you can do with the template tags (or just use one to get yourself started):
    https://premium.wpmudev.org/project/simplemarket
    https://premium.wpmudev.org/project/frame-market-theme

    Hope this helps!

  • cayres

    @Saunt - Epic indeed! Thanks for the help, +rep to you! I will have to dig deeper into this again when I have some time to look into it. I think I understand what you are saying so I'll have to give it a go. I had thought there was a list of shortcodes somewhere that I was missing that would have helped me better organize the store front. Suffice to say, I was pretty disappointed with the way it looks by default.

    @masonjames - I imagine that the themes you are talking about are wordpress themes and not marketpress styles?? I have custom themes for the 2 sites I'm working on (well, 1 is a free theme we customized and the other is a theme from another source). I'll take a look at it though to get an idea of the template tags you're talking about.

    Thanks guys!

  • cayres

    OK, I spent a few more minutes, doing what you said, taking a look at your code. I pretty much copied your marketpress styles out of your style sheet and applied them to my store and planned to adjust from there. Problem though, it's pulling the description into the product list, making it look horrible.

    Also, I created the "mp_global_products.php" page as you suggested, but you didn't say what to do with that page, so uh.. I didn't do anything with it yet :slight_smile:

    Again, I appreciate your help while I stumble through this process.

    Thanks!

  • Mason

    Hiya cayres,

    I think both your questions here are good. The reason I mentioned checking out the themes above are because they are great examples of what you can do with MarketPress.

    For example, to add both the "check out" and "view cart" links to each product, you'll want to create a custom mp_product.php theme template. What goes in this file? Well, take a look at one of our themes to see how we did it and that'll give you a good start.

    Same thing with the mp_global_products.php file. There's a sample in our GridMarket theme. I'd recommend checking it out and using it as a template for easier integration with your own theme.

    Hope this helps. Thanks!

  • Mason

    Hiya,

    As we haven't heard back from you we're going to assume the problem was sorted out and mark this ticket as resolved.

    If it wasn't resolved, or you have any more questions related to this thread please feel free to post them below and tick the 'Mark as Not Resolved (re-open)' box below the post area (or else we'll miss it!)

    Otherwise, thanks for using the forums, and for being a member of WPMU DEV, it's a pleasure to help you out and we look forward to being of assistance in the future.

    Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.