Re: Setting up customized MP_PRODUCT.PHP page

Hi there. Just wondering what would need to be done to the template page below to setup as outlined in this WPMUDEV tutorial/blog (I'm not finding what the author advised I should see, sorry!): https://goo.gl/b8zKCm

--------------------------------------------------------------------------------------------------------------------------

The author states the following:
It’s probably easiest to start off with a basic loop for displaying a single product. In your file, look for

1 <?php the_content() ?>
and replace it with a basic MarketPress loop:

1 <?php mp_product_image( true, 'single' );
2 the_content();
3 mp_product_price(true);
4 mp_buy_button(true, 'single');
5 echo mp_category_list($post->ID, '
6 <div class="mp_product_categories">' . __( 'Categorized in ', 'mp' ), ', ', '</div>
7 '); ?>
This basic loops adds in the product image, buy button, etc., and is the default for MarketPress.

--------------------------------------------------------------------------------------------------------------------------

The problem we're facing is being unable to find the exact line of code being referenced, and we don't want to change anything without knowing exactly what is being referred to!

Below is what's in the PAGE.PHP file that was renamed to MP_PRODUCT.PHP files as she outlined earlier in the tutorial (we're going this route since we're not too thrilled w/the default page for single product display!). Also, is there anything else we shoudl remove in order to have this work correctly, or ideas on what can be added to maybe make this product page a popup (i.e. lightbox type of page that they can close out and have the product listing page right there? THAT WOULD BE AWESOME!!!

<?php
/*
Template Name: MP_Product Page (full width)
*/

get_header(); ?>

<?php if ( of_get_option( 'tokopress_page_header_style' ) != 'inner' ) get_template_part( 'block-page-header-outer' ); ?>

<?php do_action( 'tokopress_before_inner_content' ); ?>

<section class="content-area" id="primary">

<?php if ( of_get_option( 'tokopress_page_header_style' ) == 'inner' ) get_template_part( 'block-page-header-inner' ); ?>

<div class="page-content">

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>

<?php if( has_shortcode( get_the_content(), 'pv_vendor_dashboard' ) || has_shortcode( get_the_content(), 'pv_orders' ) || has_shortcode( get_the_content(), 'pv_shop_settings' ) ) : ?>
<div class="mgates-page">
<?php get_template_part( 'content', 'product' ); ?>
</div>
<?php else : ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endif; ?>

<?php endwhile; ?>
<?php else : ?>

<?php get_template_part( 'content', '404' ); ?>

<?php endif; ?>

</div>
</section>

<?php do_action( 'tokopress_after_inner_content' ); ?>

<?php get_footer(); ?>

  • James Morris

    Hello John,

    I hope you are well today. Thank you for your question.

    Without having access to the exact theme you're using, this is hard to test, but... Looking at your code, the section of code it looks like you'll need to replace with your custom MarketPress loop is below:

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    
    <?php if( has_shortcode( get_the_content(), 'pv_vendor_dashboard' ) || has_shortcode( get_the_content(), 'pv_orders' ) || has_shortcode( get_the_content(), 'pv_shop_settings' ) ) : ?>
    <div class="mgates-page">
    <?php get_template_part( 'content', 'product' ); ?>
    </div>
    <?php else : ?>
    <?php get_template_part( 'content', 'page' ); ?>
    <?php endif; ?>
    
    <?php endwhile; ?>
    <?php else : ?>
    
    <?php get_template_part( 'content', '404' ); ?>
    
    <?php endif; ?>

    Now, once you remove that code, you may want to add some comments in before and after your custom loop so you'll know where to restore the original code if something goes wrong, like so:

    // Begin custom MarketPress loop
    ...your code here...
    // End custom MarketPress loop

    Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • John

    James,
    That basically worked as expected/hoped (removed the blog-like look with author/date/comment info and also removed the side widgets, thank you!

    However, still dealing with some aesthetics that I'm guessing are CSS related though I wasn't able to correct them with the standard product page; do you know if I'll be able to style with the new customized mp_product.php file?

    See the screen shots - we'd like to have the exact look and feel of the PRODUCTS page (last screenshot), which doesn't have the "extended" tan colored box that appears on product and category pages with breadcrumbs in them.

    Any assistance or thoughts would be greatly appreciated, thanks.

  • John

    James,
    Figured that out, using the wrong selectors/classes before, was able to remove the tan colored banner (leaving the breadcrumbs, don't look that bad and give buyers a way to get back to product page!).

    Here's my final question (for now!) - is there a way to get the information for the item to actually be on the RIGHT SIDE of the image instead of below it, and also add a few things, i.e. item description, FB & Twitter buttons, etc.?

  • James Morris

    Hello John,

    Have you by chance read through the Theming MarketPress guide that comes with the plugin?

    /wp-content/plugins/marketpress/ui/themes/Theming_MarketPress.txt

    Using custom page templates like you are, you can override just about anything in /marketpress/marketpress-includes/template-functions.php and make your shop look exactly like you want. :slight_smile:

    Here's a thread that gives some examples of what can be done. https://premium.wpmudev.org/forums/topic/override-functions-from-template-functionsphp-in-marketpress

    Best regards,

    James Morris

  • John

    Again, that really didn't help but thanks anyways; it may be a good habit to consider not assuming everyone understands PHP and is able to interpret what's being said in threads and the documentation! This is why I'm seeking help in the support section, I have very little experience with PHP though I can find my way around WP (front end, some back end) and have pretty good knowledge of HTML & CSS...

  • James Morris

    Hello John,

    My apologies. Since you are creating a custom template, I assumed you were more familiar with PHP.

    If you go into Admin -> Store Settings -> Presentation there are a number of options there that can adjust the alignment of images and provides options to display social sharing icons. Using those options, you should be able to get the product information to display to the right of the product image. To do this, make sure you select the "Display as list" option under Product List/Grid Settings. See screenshot:

    I hope that clarifies a bit. Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • John

    Yes, James, already been there and it's not achieving the desired look, which is why we were trying to see about using the customizable option through mp_product.php (we're not asking for people to do this for us, we actually want to learn, but being new to PHP we were hoping for more than just "here, look at this" or "this explains everything", which each time didn't even come close)!

    And now that we've decided to just switch back to the default, of course there are more problems with the actual product page showing now when clicking on a product image from the shop homepage, it just redirects back to the... wait for it... SHOP HOMEPAGE! (even after settings have been updated in both the primary site and sub-site store setting, and when hovering over the image it shows the correct link in Chrome)?!?

  • Panos

    Hi John ,

    From your previous posts I understand that you are currently using default MP layout and you need to switch sides of product info and product image blocks right? There are two ways, one with CSS only, and the other one by overriding the "mp_product()" function by using the mp_product filter hook.

    It mostly depends where you would prefer the product image to be placed on smaller screens.

    A. If you want the image to be on top and then followed by info the CSS way will be the bast fit.

    Here is the CSS you need for this:

    .mp_single_product_details{
    	background: #eee;
    	border:2px solid #ddd;
    	padding: 20px;
    }
    
    @media all and (min-width:992px){
    
    	.mp_single_product_details{
    		float: left;
    	}
    
    	.mp_single_product-has-image.mp_single_product-image-alignleft .mp_single_product_images{
    		margin-right: 0px;
    		margin-left:3%;
    		float: right;
    	}	
    
    }

    You can place it in MarketPress theme css file (in wp-content/marketpress-styles/your-style-file.css), or in your theme's custom CSS field or using some plugin like Simple Custom CSS.

    B. If you prefer the image to be after the product info it would be better to use the hook.

    I have attached a mu-plugin that uses that filter. Simply download it, unzip it and upload it at your wp-content/mu-plugins folder. If the folder doesn't exist you can simply create it.

    You might also need some css for keeping them on same line:

    @media all and (min-width:992px){
    
    	.mp_single_product-has-image.mp_single_product-image-alignleft .mp_single_product_images{
    		margin-right:0;
    	}	
    
    }

    when clicking on a product image from the shop homepage, it just redirects back to the... wait for it... SHOP HOMEPAGE!

    There could be some leftovers causing this issue as this is not default behavior. Could you please confirm that you have renamed the mp-product file you created to something else (like adding an underscore in from)? Could you also provide admin and ftp access so we can have a closer look on this? You can send that privately through our contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question?" for your topic - this and the subject line ensure that it gets assigned to me.

    Send in:Subject: "Attn: Panos Lyrakis"

    - Admin login:
    Admin username
    Admin password
    Login url

    - FTP credentials
    host
    username
    password
    (and port if required)

    - link back to this thread for reference

    Hope this helps :slight_smile:

    Thanks!
    Panos

  • John

    Panos, thanks for the reply. I'm working at this time but will try to review the information provided in more detail on my lunch break or this evening. As far as login info goes, are you able to check w/Luis (support), we had already set up a login and provided him all info needed to access the site via FTP.

    Since we haven't heard anything from him we're assuming he's been able to access the back end as requested (at this time we only see that you, Luis, & Jude have accessed the site within the last 24 hours through the WPMUDEV dashboard, so we're not sure what Luis is doing with regards to the FTP access given to him). Thanks...

  • John

    Panos, guess you may not have noticed that last night we reverted back to the mp_product.php custom option since we were unable to get product pages to show, and quite frankly we really weren't getting the help we had expected via support on this issue, so the CSS solution for the default page setting most likely isn't going to work (if you login now, you'll see it with the mp_product.php file active in our child theme folder).

    With that said, would you be able to take a look at this thread (https://premium.wpmudev.org/forums/topic/product-page-customized-layout) which clearly shows WHAT we're looking to do, and what we had based on the PHP being used at that time (please bear in mind, we're not developers and have very little to no PHP experience but are willing to learn and are asking for assistance, not someone to code this for us!).

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.